import { Modal, Table, Form } from 'com';
import { Button } from 'antd';
import { getGradeList } from 'api/dictionary';
import { GetList } from 'api/class_list';
import { useEffect, useState, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
import menuStore from 'store/menu';

/**
 * 班级列表
 */
export default forwardRef((props, ref) => {
    const { onFinish } = props;
    /**
     * 班级列表
     */
    const [list, setList] = useState([]);
    /**
     * loading
     */
    const [loading, setLoading] = useState(false);
    /**
     * 总条数
     */
    const [total, setTotal] = useState(0);
    /**
     * Modal引用
     */
    const modal = useRef();
    /**
     * 搜索模型
     */
    const [searchModel, setSearchModel] = useState({
        pageNo: 1,
        pageSize: 10,
        grade: 0
    });
    /**
     * 年级列表
     */
    const [grades, setGrades] = useState([{ label: '所有', value: 0 }]);
    /**
     * 表单配置项
     */
    const options = useMemo(() => ({
        teacher_id: {
            title: '班主任',
            tag: 'ts',
            clear: true
        },
        grade: {
            title: '班级',
            tag: 'select',
            style: { width: 120 },
            values: grades
        },
        button: {
            text: '搜索',
            tag: 'button',
            type: 'primary',
            htmlType: 'submit',
            loading
        }
    }), [loading, grades]);
    /**
     * 列定义
     */
    const cols = [
        {
            title: '班级名称',
            dataIndex: 'name',
            align: 'center'
        },
        {
            title: '班级人数',
            dataIndex: 'count',
            align: 'center'
        },
        {
            title: '班主任姓名',
            dataIndex: 'teacher_name',
            align: 'center'
        },
        {
            title: '年级',
            dataIndex: 'grade_name',
            align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            width: 80,
            render: (text, row) => <Button type="link" size="small" onClick={() => {
                onFinish({ ...row });
                modal.current.hide();
            }}>选择</Button>
        }
    ];

    useEffect(() => {
        if (menuStore.auth('classList')) {
            /**
            * 搜索
            */
            const searchList = async () => {
                try {
                    setLoading(true);
                    const { data, total } = await GetList({ ...searchModel });
                    setList(data);
                    setTotal(total);
                } catch (error) { }
                setLoading(false);
            }
            searchList();
        }
    }, [searchModel]);

    useEffect(() => {
        if (menuStore.auth('classList')) {
            const getList = async () => {
                try {
                    const grades = await getGradeList();
                    setGrades(v => [...v, ...grades.map(c => ({ label: c.name, value: c.id }))]);
                } catch (error) { }
            }
            getList();
        }
    }, []);

    useImperativeHandle(ref, () => ({
        ...modal.current
    }));

    return <Modal title="选择班级" width={1200} attrs={{ footer: null }} ref={modal}>
        {menuStore.auth('classList') && <Form values={searchModel} options={options} attrs={{ layout: 'inline' }} onFinish={value => setSearchModel({ ...searchModel, ...value, pageNo: 1 })}></Form>}
        <p></p>
        {menuStore.auth('classList') && <Table cols={cols} data={list} loading={loading} page={searchModel} total={total} onChange={setSearchModel}></Table>}
    </Modal>
})